<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
        var basePath = "${basePath}";
    </script>

    <!--
    <script src="http://code.highcharts.com/highcharts.js"></script>
    -->
    <script type="text/javascript" src="${basePath}js/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${basePath}js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${basePath}js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${basePath}js/system/serialize.js"></script>
    <script type="text/javascript" src="${basePath}js/system/util.js"></script>
    <script type="text/javascript" src="${basePath}js/charts/highcharts.js"></script>
    <script type="text/javascript" src="${basePath}js/charts/highcharts-3d.js"></script>


    <link rel="stylesheet" type="text/css" href="${basePath}css/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/default.css">

    <link rel="stylesheet" type="text/css" href="${basePath}css/form/form.css">
    <link rel="stylesheet" type="text/css" href="${basePath}css/another.css">

</head>
<body>
<div id="container" style="width: 100%; height: 90%; margin: 0 auto"></div>
<script>
    $(document).ready(function() {
        var array = new Array();
        var value = new Array();
        $.ajax({
            type:"get",
            url: basePath + "report/bloodSugarExceptionCurveReport",
            beforeSend: function(request) {
                request.setRequestHeader("header", localStorage.getItem("token"));
            },
            data:{},
            async:false,
            cache:true,
            dataType: "json", //this is important
            success:function(data) {
                $.each(data.measureTime, function(i, item) {
                    array[i] = item;
                });
                $.each(data.bloodSugarException, function(i, item) {
                    value[i] = item;
                });
            },
            error : function(data) {
                alert("error:" + data);
            }
        });

        var title = {
            text: '近40次血糖异常波动图'
        };
        var subtitle = {
            text: 'Source:自我采集'
        };
        var xAxis = {
            categories: array//['2023-09-21','2023-09-22', '2023-09-25', '2023-09-26','2023-09-27']
        };
        var yAxis = {
            title: {
                text: '血糖异常'
            },
            tickInterval:2// 刻度值
        };
        var plotOptions = {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true,
                events: {//监听点的鼠标事件
                    click: function () {
                        showValues(event.point.x);
                    }
                    //mouseOver:function() {
                },
                allowPointSelect: true,
                cursor: 'pointer' //鼠标移到图表上时鼠标的样式
            }
        };
        var series= [{
            name: '血糖异常',
            data: value
        }
        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#container').highcharts(json);

    });

    function showValues(index){
        $.ajax({
            type:"get",
            url:basePath + "report/getBloodSugarByIndex/" + index,
            beforeSend: function(request) {
                request.setRequestHeader("header", localStorage.getItem("token"));
            },
            cache:false,
            dataType: "json",
            success:function(result) {
                $.messager.alert('信息', result.result,'SUCCESS').window({ width: 300, height: 300 ,top:10,left:200});
            }
        });
    }
</script>
</body>
</html>